<template>
  <div>
    <!-- <card>
      <template slot="content">
        <el-button @click="handleClear" :loading="clearing">清除缓存</el-button>
      </template>
    </card> -->
    <card>
      <template slot="content">
        <div class="header">
          <div>单位名称</div>
          <div style="width: calc(50% - 100px)">审批操作流程</div>
          <!-- <div style="width: 100px">操作</div> -->
        </div>
        <div v-loading="loading">
          <departApprovalTree :tree="tree" @showUpdateOrganizationDialog="handleShowUpdateOrganizationDialog"></departApprovalTree>
        </div>

        <el-dialog title="审批操作编辑" width="640px" top="20px" :visible="updateOrganizationDialog.visible" @close="handleClose">
          <div class="white-card">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="审批操作：" prop="industrySectorName">
                <el-select v-model="form.industrySectorName" multiple style="width: 100%">
                  <el-option v-for="item in departmentTree" :key="item.configureId" :label="item.name" :value="item.configureId"></el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <div class="split"></div>

            <div class="dialog-footer-btn">
              <el-button @click="handleClose" type="primary" plain>关闭</el-button>
              <el-button @click="handleSubmit" :disabled="hasError" :loading="submitting" type="primary">提交</el-button>
            </div>
          </div>
        </el-dialog>
      </template>
    </card>
  </div>
</template>

<script>
import card from "@/components/card/index.vue";
import departApprovalTree from "@/views/system/components/departApprovalTree";

import * as validators from "@/utils/validators";
import * as departmentApi from "@/api/department";
import { workOrderStatus, timeRemaining, workOrderPublicStatus } from "@/utils/filters";
import * as mixins from "@/utils/mixins";
import * as departmentConfigureAPI from "@/api/departmentConfigure";

export default {
  name: "organization",
  mixins: [mixins.affirm],
  components: { card, departApprovalTree },
  filters: { workOrderStatus, timeRemaining, workOrderPublicStatus },
  data() {
    return {
      clearing: false,
      loading: true,
      tree: [],
      current: {},
      searchForm: {},
      matching: false,
      searchFormRules: {
        dateRange: [{ validator: validators.maxDay(31) }],
        title: [{ validator: validators.limitMax(10) }],
      },
      updateOrganizationDialog: {
        visible: false,
      },
      hasError: false,
      submitting: false,
      form: {
        id: "",
        industrySectorName: [],
      },
      rules: {
        industrySectorName: [{ required: true, message: "请选择" }],
      },
      departmentTree: [],
    };
  },
  watch: {
    form: {
      handler() {
        this.hasError = validators.validate(this.form, this.rules);
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.getTree();
    this.getList();
  },
  methods: {
    getTree() {
      this.loading = true;
      departmentApi
        .listDepartmentConfig()
        .then((res) => {
          this.tree = res.result;
        })
        .finally(() => (this.loading = false));
    },

    handleShowUpdateOrganizationDialog({ node }) {
      this.updateOrganizationDialog.visible = true;
      this.current = node;
      console.log("node :>> ", node);
      this.form.industrySectorName = node.checkFlowList;
    },
    handleClear() {
      this.clearing = true;
      departmentApi
        .clearStore()
        .then(this.getTree)
        .finally(() => (this.clearing = false));
    },
    handleSubmit() {
      this.submitting = true;
      this.validateAndConfirm("form")
        .then(() => {
          console.log("11111 :>> ", 11111);
        })
        .then(() => {
          this.handleClose();
        })
        .finally(() => (this.submitting = false));
    },
    handleClose() {
      this.updateOrganizationDialog.visible = false;
    },
    getList() {
      departmentConfigureAPI.getList().then((res) => {
        const result = res.result;
        if (result) {
          this.departmentTree = [...result];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 6px 0;
  // background-color: #f5f9ff;
  height: 40px;
  line-height: 40px;
  display: flex;
  font-weight: 600;
  text-align: left;
  color: #666666;
  letter-spacing: 1px;
  margin-bottom: 14px;

  & > div {
    box-sizing: border-box;
    padding: 0 10px;
    width: calc(100% / 3);
  }
}
</style>
